<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定样式</title>
		<style>
					.basic{
						width: 400px;
						height: 100px;
						border: 1px solid black;
					}
					
					.happy{
						border: 4px solid red;;
						background-color: rgba(255, 255, 0, 0.644);
						background: linear-gradient(30deg,yellow,pink,orange,yellow);
					}
					.sad{
						border: 4px dashed rgb(2, 197, 2);
						background-color: gray;
					}
					.normal{
						background-color: skyblue;
					}
		
					.atguigu1{
						background-color: yellowgreen;
					}
					.atguigu2{
						font-size: 30px;
						text-shadow:2px 2px 10px red;
					}
					.atguigu3{
						border-radius: 20px;
					}
				</style>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<!-- 绑定class样式 字符串写法，适用于： 样式的类名不确定，需要动态指定 -->
			<div class="basic normal" :class="mode" @click="changeMood">{{name}}</div>
			<br>
			<!-- 绑定class样式  数组写法，适用于： 要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic normal" :class="classArr">{{name}}</div>
			<br>
			<!-- 绑定class样式  对象写法，适用于： 要绑定的样式个数确定、名字也确定  但是要动态决定用不用-->
			<div class="basic normal" :class="classObj">{{name}}</div>
			
			<!-- 绑定style样式 -- 对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div>
			<br>
			<!-- 绑定style样式 -- 数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false
			new Vue({
				el:"#root",
				data:{
					name:"尚硅谷",
					mode:"normal",
					classArr: ["happy","sad","normal"],
					classObj:{
						atguigu1:false,
						atguigu2:false
					},
					styleObj:{
						fontSize:40+"px"
					},
					styleArr:[
						{
							fontSize:40+"px"
						}
					]
				},
				methods:{
					changeMood(){
						const arr = ["happy","sad","normal"];
						const index =  Math .floor(Math.random() * 3);
						this.mode = arr[index];
					}
				}
			})
		</script>
	</body>
</html>
